<template>
  <div class="counter-example">
    <h2>🔢 计数器示例 - 基础 State 和 Mutations</h2>
    <div class="counter-card">
      <div class="counter-display">
        <span class="count-number">{{ count }}</span>
        <span class="count-label">当前计数</span>
      </div>
      
      <div class="counter-info">
        <p><strong>双倍值:</strong> {{ doubleCount }}</p>
        <p><strong>是否为偶数:</strong> {{ countIsEven ? '是' : '否' }}</p>
      </div>
      
      <div class="counter-controls">
        <button @click="decrement" class="btn btn-danger">-1</button>
        <button @click="increment" class="btn btn-success">+1</button>
        <button @click="incrementAsync" class="btn btn-info" :disabled="loading">
          {{ loading ? '执行中...' : '异步+1' }}
        </button>
      </div>
      
      <div class="manual-set">
        <input 
          v-model.number="manualValue" 
          type="number" 
          placeholder="输入数值"
          class="manual-input"
        >
        <button @click="setCount" class="btn btn-primary">设置值</button>
      </div>
    </div>
    
    <!-- 代码说明区域 -->
    <div class="explanation">
      <h3>📚 学习要点：</h3>
      <div class="concept-grid">
        <div class="concept-item">
          <h4>State (状态)</h4>
          <p>用 <code>this.$store.state.count</code> 或 <code>mapState</code> 访问状态</p>
        </div>
        <div class="concept-item">
          <h4>Mutations (突变)</h4>
          <p>同步修改状态，用 <code>this.$store.commit()</code> 或 <code>mapMutations</code> 调用</p>
        </div>
        <div class="concept-item">
          <h4>Actions (动作)</h4>
          <p>异步操作，用 <code>this.$store.dispatch()</code> 或 <code>mapActions</code> 调用</p>
        </div>
        <div class="concept-item">
          <h4>Getters (计算属性)</h4>
          <p>基于state计算衍生数据，类似组件的computed</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'CounterExample',
  data() {
    return {
      manualValue: 0,
      loading: false
    }
  },
  computed: {
    // 方式1: 直接访问 store
    // count() {
    //   return this.$store.state.count
    // },
    
    // 方式2: 使用 mapState 辅助函数（推荐）
    ...mapState(['count']),
    
    // 使用 mapGetters 映射计算属性
    ...mapGetters(['doubleCount', 'countIsEven'])
  },
  methods: {
    // 方式1: 直接调用 commit
    // increment() {
    //   this.$store.commit('INCREMENT')
    // },
    
    // 方式2: 使用 mapMutations 辅助函数（推荐）
    ...mapMutations(['INCREMENT', 'DECREMENT', 'SET_COUNT']),
    
    // 使用 mapActions 映射异步动作
    ...mapActions(['incrementAsync']),
    
    // 封装方法，提供更好的用户体验
    increment() {
      this.INCREMENT()
    },
    
    decrement() {
      this.DECREMENT()
    },
    
    async incrementAsync() {
      this.loading = true
      try {
        await this.$store.dispatch('incrementAsync')
      } finally {
        this.loading = false
      }
    },
    
    setCount() {
      if (!isNaN(this.manualValue)) {
        this.SET_COUNT(this.manualValue)
        this.manualValue = 0
      }
    }
  }
}
</script>

<style scoped>
.counter-example {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.counter-card {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.counter-display {
  text-align: center;
  margin-bottom: 30px;
}

.count-number {
  font-size: 4rem;
  font-weight: bold;
  color: #2c3e50;
  display: block;
}

.count-label {
  font-size: 1rem;
  color: #7f8c8d;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.counter-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.counter-info p {
  margin: 5px 0;
  color: #495057;
}

.counter-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.manual-set {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

.manual-input {
  padding: 8px 12px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  font-size: 1rem;
  width: 120px;
}

.manual-input:focus {
  outline: none;
  border-color: #007bff;
}

.explanation {
  background: #f8f9fa;
  padding: 25px;
  border-radius: 12px;
  border-left: 5px solid #007bff;
}

.explanation h3 {
  color: #2c3e50;
  margin-bottom: 20px;
}

.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.concept-item {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.concept-item h4 {
  color: #495057;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.concept-item p {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.5;
}

code {
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  color: #e83e8c;
}
</style>